<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .wap{
      width: 300px; 
      margin: 100px auto 0;
    }
    table{
      border:1px solid #ccc;
      border-collapse: collapse;
      /* border-spacing: 0px; */
      width: 300px;
    }
    thead th{
      border:1px solid #ccc;
      background: blue;
      color:white;
      padding:10px;
      font: bold 16px "微软雅黑";
    }
    table td{
      border: 1px solid #ccc;
      padding:10px;
      font: 14px "微软雅黑";
    }
    tbody tr{
      background: #f0f0f0;
    }
    tbody tr:hover{
      background: white;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="wap">
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" id="j_cbAll"></th>
          <th>商品</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td><input type="checkbox"></td>
          <td>iPhone8</td>
          <td>8000</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>iPad Pro</td>
          <td>5000</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>iPad Air</td>
          <td>2000</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>Apple Watch</td>
          <td>2000</td>
        </tr>
      </tbody>
    </table>
    <input type="button" value=" 反选 ">
  </div>
  <script>
    var all_btn = document.querySelector('thead input:nth-child(1)');
    var alone_btns = document.querySelectorAll('tbody input');
    var re_btn = document.querySelector('input[type="button"]');
    console.log(re_btn)
    //全选
    all_btn.onclick = function(){
      for(var i = 0; i < alone_btns.length; i++){
        alone_btns[i].checked = this.checked;
      }
    }
    //单选
    for(var i = 0; i < alone_btns.length; i++){
      alone_btns[i].onclick = function(){
        var flag = true;
        for(var j = 0; j < alone_btns.length; j++){
          if(alone_btns[j].checked != true){
            console.log(alone_btns[j].checked)
            flag = false;
            alone_btns[j].checked = flag;
          }else{ 
            alone_btns[j].checked = true;
          }
        }
        all_btn.checked = flag;
      }
    }
   
    //反选
    re_btn.onclick = function(){
      var flag = true;
      for(var i = 0; i < alone_btns.length; i++){
        if(alone_btns[i].checked == true ){
          flag = false;
          alone_btns[i].checked = false;
        }else{
          alone_btns[i].checked = true;
        } 
      }
      all_btn.checked = flag;
    }
  </script>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .wrap{
      width: 300px;
      margin: 30px auto 0;
    }
    table{
      width: 300px;
      border:1px solid #ccc;
      border-collapse: collapse;
    }
    th,td{
      border: 1px solid #ccc;
      padding:10px;
      text-align: center;
    }
    th{
      background: blue;
      color:white;
      font:bold 16px "微软雅黑"
    }
    td{
      font: 14px "微软雅黑"
    }
    tbody tr{
      background-color: #ddd;
    }
    tbody tr:hover{
      background:white;
    }
  
  </style>
</head>
<body>
  <div class="wrap">
    <table>
      <thead>
        <tr>
          <th><input type="checkbox"></th>
          <th>商品</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox"></td>
          <td>iPhone8</td>
          <td>8000</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>iPad Pro</td>
          <td>5000</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>iPad Air</td>
          <td>2000</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>Apple Watch</td>
          <td>2000</td>
        </tr>
      </tbody>
    </table>
    <input type="button" value="   反选   ">
  </div>
  <script>
    var all_btn = document.querySelector('thead input:first-child');
    var alone_btns = document.querySelectorAll('tbody input');
    var btn = document.querySelector('input[type="button"]');
    //多选
    all_btn.onclick = function(){
      for(var i = 0; i < alone_btns.length; i++){
        alone_btns[i].checked = this.checked;
      }
    }
    //单选
    for(var i = 0; i <alone_btns.length; i++){
      alone_btns[i].onclick = function(){
        var flag = true;
      //方法一
      //   for(var j = 0; j < alone_btns.length; j++){
      //     if(alone_btns[j].checked == true){
      //       alone_btns[j].checked = true;
      //     }else{
      //       flag = false;
      //     }
      //   }
      //   all_btn.checked = flag;
      // }

      //方法二
      for(var j = 0; j < alone_btns.length; j++){
        if(!alone_btns[j].checked){
            flag = false;
            alone_btns[j].checked = flag; 
          }
        }
        all_btn.checked = flag;
      }
    }
    //反选
    btn.onclick = function(){
      var flag = true;
      for(var i = 0; i < alone_btns.length; i++){
        if(alone_btns[i].checked == true){
          flag = false;
          alone_btns[i].checked = flag;
        }else{
          alone_btns[i].checked = true;
        }
      }
      all_btn.checked = flag;
    }
  </script>
</body>
</html>